<!--
 * @Description: 食谱食材信息
 * @Version: 1.0
 * @Author: Yuanjy
 * @Date: 2020-04-05 17:20:14
 * @LastEditors: Yuanjy
 * @LastEditTime: 2020-06-08 23:14:41
 -->
<template>
  <div>
    <el-button type="success" size="medium" @click="showRecipeLib()">从食材库选择</el-button>
    <el-dialog
      :visible.sync="recipeLibShow"
      :modal="false"
      title="食材库"
      width="500px">
      <div class="search-box">
        <el-input v-model="query.name" size="small" placeholder="食材名称" class="food-input" @keyup.enter.native="toQuery" />
        <el-button type="primary" size="small" class="el-icon-search" @click="toQuery">搜索</el-button>
        <el-button size="small" class="el-icon-q" @click="repeal">撤销</el-button>
      </div>
      <el-table v-loading.body="tableLoading" :data="recipeList" border fit highlight-current-row max-height="400" @current-change="handleCurrentChange">
        <el-table-column
          width="60">
          <template slot-scope="scope">
            <el-radio v-model="radio" :label="scope.row.id" class="radio-18"><span/></el-radio>
          </template>
        </el-table-column>
        <el-table-column label="图片" width="160">
          <template slot-scope="scope">
            <img :src="scope.row.thumbnail" alt="" style="width: 100px;">
          </template>
        </el-table-column>
        <el-table-column label="名称" prop="name" />
      </el-table>

      <el-pagination
        :current-page.sync="query.page"
        :page-size="query.limit"
        :pager-count="5"
        :total="total"
        layout="total, sizes, prev, pager, next"
        @current-change="pageChange"
        @size-change="sizeChange"
      />

      <div slot="footer" class="dialog-footer">
        <el-button type="warning" @click="cancelLib">取消</el-button>
        <el-button type="primary" @click="selectRecipeLib">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      query: {
        name: '',
        page: 1,
        limit: 10
      },
      radio: '',
      recipeLibShow: false,
      recipeList: [],
      total: 10,
      tableLoading: false,
      checkRecipeLib: {}, // 选中的食谱
    }
  },
  methods: {
    showRecipeLib() {
      console.log(this.checkRecipeLib)
      this.recipeLibShow = true
      this.toQuery()
    },
    toQuery() {
      // this.tableLoading = true
      this.$api.resource.recipe
        .getRecipeLib({
          params: this.query
        })
        .then(res => {
          this.recipeList = res.data.list
          this.total = res.data.total
          // this.tableLoading = false
        }).catch(err => {
          // this.tableLoading = false
          console.log(err)
        })
    },
    pageChange(val) {
      this.query.page = val
      this.toQuery()
    },
    sizeChange(val) {
      this.query.limit = val
      this.toQuery()
    },
    cancelLib() {
      this.recipeLibShow = false
    },
    selectRecipeLib() {
      console.log(this.checkRecipeLib)
      this.$emit('selectionRecipeLib', this.checkRecipeLib)
      this.recipeLibShow = false
    },
    repeal() {
      this.query.name = ''
      this.toQuery()
    },
    handleCurrentChange(val) {
      if (val !== null) {
        this.checkRecipeLib = val
      }
      console.log('xxxx', this.checkRecipeLib, val)
    }
  }
}
</script>

<style scoped>
.search-box{
  margin-bottom: 10px;
}
.foot-info{
  display: inline-block;
  text-align: center;
  margin: 15px 0;
}
.food-input.el-input{
  width: 200px;
  margin-right: 10px;
}
</style>